<template>
  <div class="advert-recommend">
    <el-form
      ref="formDataRef"
      :model="formData"
      :rules="rules"
      label-position="top"
      require-asterisk-position="right"
    >
      <el-card header="选择视频" style="

--el-card-padding: 18px 16px 16px 16px">
        <div class="text-[#222] text-base">
          可选0-50的视频进行投放，当前已选{{ formData.videoId.length }}个
        </div>
        <el-form-item prop="videoId">
          <el-scrollbar style="min-height: 145px">
            <el-checkbox-group
              class="flex"
              v-model="formData.videoId"
              :max="50"
            >
              <el-checkbox
                :value="x.id" :key="index"
                v-for="(x,index) in videoList"
                class="scrollbar-item"
              >
                <el-image lazy
                  :src="x.coverImg"
                  class="block"
                  fit="cover"
                  style="
                    width: var(--image-width, 100px);
                    height: var(--image-height, 100px);
                  "
                />
              </el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </el-form-item>
      </el-card>

      <el-card header="营销目标与场景" class="mt-4">
        <div v-loading="loading" v-if="loading" class="min-h-100" />
        <template v-else>
          <el-form-item label="投放时长" prop="date">
            <dict-segmented v-model="formData.date" type="dsp_time" />
          </el-form-item>
          <el-form-item label="投放金额" prop="amount">
            <dict-segmented v-model="formData.amount" type="dsp_amount" />
          </el-form-item>
          <el-form-item label="投放人群" prop="crowds">
            <dict-segmented v-model="formData.crowds" type="dsp_crowds" />
          </el-form-item>
          <el-form-item label="定向设置" prop="setting">
            <dict-segmented v-model="formData.setting" type="dsp_setting" />
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <dict-segmented
              v-model="formData.gender"
              type="gender"
              allow-empty
            />
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <dict-select
              v-model="formData.age"
              type="age"
              allow-empty
              multiple
              checkbox
            />
          </el-form-item>
          <el-form-item label="地域" prop="territory_type">
            <dict-segmented
              v-model="formData.territory_type"
              type="territory_type"
            />
          </el-form-item>
          <el-form-item label="兴趣标签" prop="interestId_enable">
            <div class="flex w-full">
              <dict-segmented
                v-model="formData.interestId_enable"
                :data="[{ label: '指定兴趣标签', value: '1' }]"
                allow-empty
              />
              <div class="ml-4" v-if="formData.interestId_enable == 1">
                <dict-select
                  width="350px"
                  v-model="formData.interestId"
                  type="interestId"
                  clearable
                  multiple
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="平台" prop="os_type">
            <dict-segmented
              v-model="formData.os_type"
              type="os_type"
              allow-empty
            />
          </el-form-item>
          <el-form-item label="网络" prop="network_type">
            <dict-select
              v-model="formData.network_type"
              type="network_type"
              allow-empty
              multiple
              checkbox
            />
          </el-form-item>
          <el-form-item label="设备品牌" prop="mobile_brand_enable">
            <div class="flex w-full">
              <dict-segmented
                v-model="formData.mobile_brand_enable"
                :data="[{ label: '指定设备品牌', value: '1' }]"
                allow-empty
              />
              <div class="ml-4" v-if="formData.mobile_brand_enable == 1">
                <dict-select
                  width="350px"
                  v-model="formData.mobile_brand"
                  type="mobile_brand"
                  clearable
                  multiple
                />
              </div>
            </div>
          </el-form-item>
          <el-form-item label="投放时段" prop="runTimeRangeType">
            <div class="flex flex-col w-full">
              <dict-segmented
                v-model="formData.runTimeRangeType"
                :data="[{ label: '指定时间段', value: 1 }]"
                allow-empty
              />
              <div
                class="text-gray-500 py-2"
                v-if="formData.runTimeRangeType == 1"
              >
                <select-time-range
                  v-model="formData.runTimeRange"
                ></select-time-range>
              </div>
            </div>
          </el-form-item>
        </template>
      </el-card>

      <el-card header="金额明细" class="mt-4">
        <div class="pb-2">
          <strong class="text-xl">合计</strong>
          <span class="text-red-500 text-lg ml-2">¥0.00</span>
        </div>
        <div class="text-xs pb-2">
          <el-checkbox v-model="checked">
            <span class="text-[#222]">已阅读并同意</span>
            <span class="text-red-500">《支付协议》</span>
          </el-checkbox>
        </div>
        <el-button type="primary" class="w-[188px]" @click="onSubmit">
          支付
        </el-button>
      </el-card>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, computed, nextTick } from "vue"
import DictSegmented from "@/components/dictionary/segmented.vue"
import DictSelect from "@/components/dictionary/select.vue"
import SelectTimeRange from "@/components/selectTimeRange.vue"
import { getListApi } from "@/api/video/data"
import { message } from "@/Hooks/Element-plus"
import { useRouter } from "vue-router"

const weekData = Array.from({ length: 7 })
const hourData = Array.from({ length: 24 })
const defaultRunTimeRange = weekData
  .map(() => hourData.map(() => "1").join(""))
  .join("-")

const loading = ref(true)
const router = useRouter()
const checked = ref(false)
const formDataRef = ref()
const formData = reactive({
  videoId: [],
  date: 0,
  amount: 0,
  crowds: 1,
  setting: 1,
  gender: 0,
  age: "0",
  territory_type: 1,
  interestId_enable: 0,
  interestId: "",
  os_type: 0,
  network_type: "0",
  mobile_brand_enable: 0,
  mobile_brand: "",
  runTimeRange: defaultRunTimeRange,
  runTimeRangeType: 0,
})

const rules = ref({
  videoId: [
    { required: true, message: "请选择视频", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (!value || value.length < 0) {
          callback(new Error("请选择视频"))
        } else {
          callback()
        }
      },
    },
  ],
  date: [{ required: true, message: "请选择投放时长", trigger: "change" }],
  amount: [{ required: true, message: "请选择投放金额", trigger: "change" }],
  crowds: [{ required: true, message: "请选择投放人群", trigger: "change" }],
  setting: [{ required: true, message: "请选择定向设置", trigger: "change" }],
  gender: [{ required: true, message: "请选择性别", trigger: "change" }],
  age: [{ required: true, message: "请选择年龄", trigger: "change" }],
  territory_type: [
    { required: true, message: "请选择地域", trigger: "change" },
  ],
  interestId_enable: [
    { required: true, message: "请选择兴趣类别", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value == 1 && !formData.interestId) {
          callback(new Error("请选择兴趣类别"))
        } else {
          callback()
        }
      },
    },
  ],
  os_type: [{ required: true, message: "请选择设备平台", trigger: "change" }],
  network_type: [
    { required: true, message: "请选择网络类型", trigger: "change" },
  ],
  mobile_brand_enable: [
    { required: true, message: "请选择设备品牌", trigger: "change" },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value == 1 && !formData.mobile_brand) {
          callback(new Error("请选择设备品牌"))
        } else {
          callback()
        }
      },
    },
  ],
})

const videoList = ref([] as any[])
const initData = async () => {
  const videoData = await getListApi({ page: 1, pageSize: 999 })
  if (videoData.success) {
    videoList.value = (videoData.data?.records || []) as any[]
  }

  await nextTick(() => {
    loading.value = false
  })
}
initData()

const onSubmit = () => {
  if (checked.value == false) {
    message("error", "请阅读并同意《支付协议》")
    return
  }
  formDataRef.value?.validate(async (valid: boolean) => {
    if (!valid) {
      setTimeout(() => {
        document
          .querySelector(".is-error")
          ?.scrollIntoView({ behavior: "smooth" })
      }, 200)
      return
    }
    message("success", "提交成功")
    setTimeout(() => {
      router.push({ path: "/" })
    }, 2000)
  })
}
</script>

<style lang="scss" scoped>
.advert-recommend {
  --el-font-size-base: 16px;
  --el-text-color-regular: #222;

  .scrollbar-item {
    position: relative;
    flex-shrink: 0;

    //border-radius: 6px;
    //background: var(--el-color-danger-light-9);
    width: 102px;
    height: 145px;
    margin: 14px 14px 10px 0;

    --image-width: 102px;
    --image-height: 145px;
    --el-checkbox-height: 145px;

    :deep(.el-checkbox__label) {
      display: block;
      width: 102px;
      height: 145px;
      padding-left: 0;
      overflow: hidden;
      background: var(--el-color-danger-light-9);
      border-radius: 6px;
    }

    :deep(.el-checkbox__input) {
      --el-checkbox-input-width: 17px;
      --el-checkbox-input-height: 17px;

      position: absolute;
      top: -6px;
      right: -6px;

      .el-checkbox__inner {
        border-radius: 50%;

        &::after {
          top: 2px;
          left: 5px;
          width: 5px;
          height: 8px;
        }
      }
    }
  }
}
</style>
